<template>
	<div class="f f-a-c f-w-w f-j-b">
		<div v-for="(item, index) in list" :class="{ act: ind == index }" :key="index" @click="actQie(item, index)" class="hous hand">{{ item.name }}</div>
	</div>
</template>

<script setup>
	import { ref } from "vue";
	let ind = ref(0);
	let list = ref([
		{
			name: "10:00AM"
		},
		{
			name: "10:30AM"
		},
		{
			name: "11:00AM"
		},
		{
			name: "11:30AM"
		},
		{
			name: "12:00AM"
		},
		{
			name: "12:30AM"
		},
		{
			name: "13:00AM"
		},
		{
			name: "13:30AM"
		},
		{
			name: "14:00AM"
		},
		{
			name: "14:30AM"
		},
		{
			name: "15:00AM"
		},
		{
			name: "15:30AM"
		},
		{
			name: "16:00AM"
		},
		{
			name: "16:30AM"
		},
		{
			name: "17:00AM"
		},
		{
			name: "17:30AM"
		},
		{
			name: "18:00AM"
		},
		{
			name: "18:30AM"
		},
		{
			name: "19:00AM"
		},
		{
			name: "19:30AM"
		},
		{
			name: "20:00AM"
		},
		{
			name: "20:30AM"
		},
		{
			name: "21:00AM"
		},
		{
			name: "21:30AM"
		}
	]);

	const actQie = (item, index) => {
		console.log(item, index);
		ind.value = index;
	};

	// 暴露给父组件
	defineExpose({
		ind
	});
</script>
<style scoped>
	.hous {
		width: 23%;
		height: 45px;
		line-height: 45px;
		margin-bottom: 24px;
		border: 2px solid #dddee1;
		border-radius: 8px;
		font-size: 16px;
		font-family: Manrope, Manrope-400;
		font-weight: 500;
		text-align: center;
		color: #02102e;
	}
	.act {
		border: 2px solid #02102e;
	}
</style>
